<!DOCTYPE html>
<html>
<head>
    <title>报告</title>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.7/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
    <style>
        .box{
            width: 1200px;
            margin: 100px auto 0;
            min-height: 500px;
            background: rgba(0, 0, 0, .3);
            display: flex;
            flex-direction: row;
            padding: 0;
        }
        .box li{
            list-style: none;
            flex: 1;
        }
        .box li:first-child{
            margin-right: 50px;
        }
        #rose, #rtch{
            width: 575px;
            height: 575px;
        }
    </style>
</head>
<body>
<div>
    <div id="app"></div>
</div>
</body>
<script type="text/x-template" id='script'>
    <ul class="box">
        <li id="rose"></li>
        <li id="rtch" ref="rtch">
            <canvas ref="rtchCanvas"></canvas>
        </li>
    </ul>
</script>
<script type="text/javascript">
    window.onload = () => {
        let vm = new Vue({
            el: '#app',
            template: '#script',
            mounted() {
                // rose
                let roseChart = echarts.init(document.getElementById('rose'));
                roseChart.setOption(this.optionsRose, true);
                // rtch
                this.w = this.$refs.rtch ? this.$refs.rtch.offsetWidth : '';
                this.h = this.$refs.rtch ? this.$refs.rtch.offsetHeight : '';
                this.createTable();
                const v = ${data2};
                this.filterDot(v);
            },
            data: {
                optionsRose: {
                    "legend":{
                        "show":false
                    },
                    "tooltip":{
                        "trigger":"item",
                        "formatter":"{b}:{c}%"
                    },
                    "calculable":true,
                    "polar":{
                        "center":[
                            "50%",
                            "50%"],
                        "radius":"65%"
                    },
                    "radiusAxis":{
                        "min":0,
                        "max":100,
                        "axisLine":{
                            "show":true
                        },
                        "axisTick":{
                            "show":false
                        },
                        "axisLabel":{
                            "show":false
                        },
                        "splitLine":{
                            "lineStyle":{
                                "type":"solid",
                                "color":"#C9CFD4"
                            }
                        }
                    },
                    "angleAxis":{
                        "type":"category",
                        "splitLine":{
                            "show":true,
                            "lineStyle":{
                                "width":1,
                                "type":"dashed",
                                "color":"#C9CFD4"
                            }
                        },
                        "axisLine":{
                            "lineStyle":{
                                "color":"rgba(255,255,255,1)"
                            }
                        },
                        "axisTick":{
                            "show":false
                        },
                        "axisLabel":{
                            "show":false
                        },
                        "data":[
                            1,
                            2,
                            3,
                            4,
                            5,
                            6,
                            7,
                            8,
                            9]
                    },
                    "series":[
                        {
                            "name":"课堂行为",
                            "type":"pie",
                            "radius":[
                                "12%",
                                "65%"],
                            "center":[
                                "50%",
                                "50%"],
                            "roseType":"area",
                            "label":{
                                "show":true,
                                "fontSize":12,
                                "color":"#232323",
                                "formatter":"{b}:\n{c}%"
                            },
                            "labelLine":{
                                "show":true
                            },
                            "data":${data}
                        }]
                },
                ctx: null,
                x: '',
                y: '',
                w: 0,
                h: 0,
                type: {
                    tableColor: '#000',
                    fontColor: '#232323'
                }

            },
            computed: {
                TYPE() {
                    let {titleSize = '16px', coordSize = '12px', tableColor = 'rgba(255,255,255,0.5)', fontColor = '#d6d6d6', lineWidth = 1, TriangleLinewidth = 2, TriangleSize = '14px', TriangleColor = '#2DABFF'} = this.type;
                    return {titleSize, coordSize, tableColor, fontColor, lineWidth, TriangleLinewidth, TriangleSize, TriangleColor};
                }
            },
            methods: {
                drawCircle(x, y, fillStyle, r = 5) { // 绘制圆形rtch
                    let ctx = this.ctx;
                    ctx.beginPath();
                    ctx.arc(x, y, r, 0, 2 * Math.PI);
                    ctx.fillStyle = fillStyle;
                    ctx.closePath();
                    ctx.fill();
                },
                drawPolygon(conf) { // 绘制多边形rtch
                    let ctx = this.ctx;
                    let x = (conf && conf.x) || 0; // 中心点x坐标
                    let y = (conf && conf.y) || 0; // 中心点y坐标
                    let num = (conf && conf.num) || 3; // 图形边的个数
                    let r = (conf && conf.r) || 10; // 图形的半径
                    let width = (conf && conf.width) || 5;
                    let strokeStyle = conf && conf.strokeStyle;
                    let fillStyle = conf && conf.fillStyle;
                    // 开始路径
                    ctx.beginPath();
                    let startX = x + r * Math.cos(2 * Math.PI * 0 / num);
                    let startY = y + r * Math.sin(2 * Math.PI * 0 / num);
                    ctx.moveTo(startX, startY);
                    for (let i = 1; i <= num; i++) {
                        let newX = x + r * Math.cos(2 * Math.PI * i / num);
                        let newY = y + r * Math.sin(2 * Math.PI * i / num);
                        ctx.lineTo(newX, newY);
                    }
                    ctx.closePath();
                    // 路径闭合
                    if (strokeStyle) {
                        ctx.strokeStyle = strokeStyle;
                        ctx.lineWidth = width;
                        ctx.lineJoin = 'round';
                        ctx.stroke();
                    }
                    if (fillStyle) {
                        ctx.fillStyle = fillStyle;
                        ctx.fill();
                    }
                },
                filterDot(v) {
                    if (!v.coord) {
                        return;
                    }
                    let x = v.coord[0] * (this.w - 3 * this.x) + 2 * this.x;
                    let y = (1 - v.coord[1]) * (this.h - 3 * this.y) + this.y;
                    if (v.num) {
                        let o = {
                            x: x,
                            y: y,
                            num: v.num || 3,
                            r: v.r || 10,
                            fillStyle: v.fillStyle || '#2DABFF'
                        };
                        this.drawPolygon(o);
                    } else {
                        let fillStyle = v.fillStyle || '#2DABFF';
                        let r = v.r || 5;
                        this.drawCircle(x, y, fillStyle, r);
                    }
                },
                createTable() {
                    this.$refs.rtchCanvas.width = this.w;
                    this.$refs.rtchCanvas.height = this.h;
                    let x = this.x = this.w / 13; // 每格宽度
                    let y = this.y = this.h / 13; // 每格高度
                    let ctx = this.ctx = this.$refs.rtchCanvas.getContext('2d');
                    ctx.clearRect(0, 0, this.w, this.h);
                    ctx.beginPath();
                    ctx.lineWidth = this.TYPE.lineWidth; // 设置线宽
                    ctx.fillStyle = this.TYPE.fontColor; // 文字颜色
                    ctx.strokeStyle = this.TYPE.tableColor; // 设置表格线的颜色
                    let startX = 0; // x起点
                    let startY = 0; // y起点
                    let k = 1; // y坐标轴
                    for (let i = 0; i < 14; i++) {
                        if (i > 0 && i < 12) {
                            // 横轴
                            startY = y * i;
                            ctx.moveTo(2 * x, startY);
                            ctx.lineTo(this.w - x, startY);
                        }
                        if (i === 0) { // y坐标轴名称
                            ctx.font = this.TYPE.titleSize +` Arial normal`;
                            ctx.fillText('CH', x + 10, 16);
                        }
                        for (let j = 0; j < 14; j++) {
                            if (j > 1 && j < 12) {
                                if (i > 0 && i < 12) {
                                    // 纵轴
                                    startX = x * (i + 1);
                                    ctx.moveTo(startX, y * (j - 1));
                                    ctx.lineTo(startX, y * j);
                                }
                            }
                            if (i === 0 && j > 1 && j < 13) { // y坐标序号
                                ctx.font = this.TYPE.coordSize +` Arial normal`;
                                ctx.fillText(j === 12 ? 0 : k.toFixed(1), x - 4, y * (j - 1) + 6);
                                k -= 0.1;
                            }
                            if (i > 1 && i < 12 && j === 12) { // x坐标序号
                                ctx.font = this.TYPE.coordSize +` Arial normal`;
                                ctx.fillText(i > 10 ? '1.0' : '0.' + (i - 1), x * i + x / 2, this.h - 5 - y);
                            }
                            if (i === 12 && j === 12) { // x坐标轴名称
                                ctx.font =this.TYPE.titleSize+ ` Arial normal`;
                                ctx.fillText('RT', this.w - 18, this.h - 3 * y / 2);
                            }
                        }
                    }
                    //
                    ctx.stroke();
                    ctx.closePath(); // 表格绘制完毕
                    this.createTriangle(x, y);
                },
                createTriangle(x, y) {
                    let ctx = this.ctx;
                    ctx.beginPath(); // 开始绘制三角形
                    ctx.strokeStyle = this.TYPE.TriangleColor;
                    ctx.lineWidth = this.TYPE.TriangleLinewidth;
                    ctx.moveTo(2 * x, this.h - 2 * y);
                    ctx.lineTo(7 * x, y);
                    ctx.lineTo(this.w - x, this.h - 2 * y);
                    ctx.lineTo(2 * x, this.h - 2 * y);
                    // 三角形内的分割线
                    ctx.moveTo(4 * x, this.h - 6 * y);
                    ctx.lineTo(10 * x, this.h - 6 * y);
                    //
                    ctx.moveTo(5 * x, this.h - 8 * y);
                    ctx.lineTo(5 * x, this.h - 2 * y);
                    //
                    ctx.moveTo(9 * x, this.h - 8 * y);
                    ctx.lineTo(9 * x, this.h - 2 * y);
                    ctx.stroke();
                    ctx.closePath();
                    ctx.beginPath();
                    // 绘制文字
                    ctx.font = this.TYPE.TriangleSize +` Arial normal`;
                    ctx.fillText('对话型', 7 * x - 48 / 2, this.h - 8 * y); // 48/2 为字体宽度
                    ctx.fillText('混合型', 7 * x - 48 / 2, this.h - 4 * y); // 48/2 为字体宽度
                    ctx.fillText('练习型', 3 * x, this.h - 3 * y);
                    ctx.fillText('讲授型', 9 * x + 5, this.h - 3 * y);
                    ctx.stroke();
                    ctx.closePath();
                },
            }
        });
    }
</script>
</html>